<template>
	<view class="">
		vue3 在更新数据的时候不会触发组件更新钩子，只有当组件发生变化的时候才会触发onUpdated
	</view>
	<view class="">{{ count }}</view>
	<!-- <view v-if="count%2===0">
		{{count}}除以2余数为0
	</view>
	<view v-else>
		{{count}}除以2余数为1
	</view> -->
	<view class="">
		<button type="warn" @click="count++">count++</button>
	</view>
	<view class="container"><button @click="toActive" type="primary">父子组件示例页面</button></view>
</template>

<script setup>
import { onMounted, onUpdated, onBeforeUnmount, onActivated, onDeactivated, onBeforeMount, ref } from 'vue';
//data定义，相当于data
const count = ref(0);
// 方法定义相当于methods
const toActive = () => {
	uni.navigateTo({
		url: '/pages/active/active'
	});
};
onBeforeMount(() => {
	console.log('index组件挂载前 onLaunch');
});
onMounted(() => {
	console.log('index组件被挂载 onLaunch');
});
onUpdated(() => {
	console.log('index组件更新 ');
});
onBeforeUnmount(() => {
	console.log('index组件卸载前 ');
});
onActivated(() => {
	console.log('index组件展示 onShow');
});
onDeactivated(() => {
	console.log('index组件隐藏');
});
</script>

<style>
.container {
	padding: 20px;
	font-size: 14px;
	line-height: 24px;
}
view{
	padding: 20px;
}
</style>
